import React from 'react';
import RuleItem from './Item';
import classNames from 'classnames';
import RuleSettings from './Settings';
import { observer } from "mobx-react";
import { Row, Col, Button, Alert } from 'antd';
import { WeaLocaleProvider } from 'ecCom';
import { ruleTypes } from '../../../../../constants/form';
import './Pane.less';

const { FIELD, JUMP } = ruleTypes;
const { getLabel } = WeaLocaleProvider;

const RuleAlert = ({ visible }) => (
  <div className={classNames({ hide: !visible })}>
    <Alert
      showIcon
      type='warning'
      message={getLabel(503919,'规则冲突警告')}
      description={getLabel(503920,'您有超过2个或以上的规则应用于同一字段，这可能会导致提交时规则冲突，字段无法正确显示或被隐藏。为了表单正常显示和填写，请修改当前的规则，避免一个字段被多个规则控制。')}
    />
  </div>
);

const RuleIntr = ({ visible, text, src }) => (
  <div className={classNames('rule-intr', { hide: !visible })}>
    <p>{text}</p>
    <img src={src} />
  </div>
);

@observer
export default class RulePane extends React.Component {
  static defaultProps = {
    store: {}
  };

  constructor(props) {
    super(props);

    this.state = {
      isShowConflict: false
    };
  }

  getIntrLabels(type) {
    switch(type) {
      case FIELD:
        return {
          text: getLabel(503921, '你可以为选择字段（选择项和下拉框）设定一些规则：在填写者选择某选项后，触发显示位于该字段之后的其他字段，例如：'),
          src: '/edc/images/field_rule.gif'
        };
      case JUMP:
        return {
          text: getLabel(503922, '你可以为选择字段（选择项和下拉框）设定一些跳转规则：当填写者选择某选项并提交后，跳转到指定网址，例如：'),
          src: '/edc/images/jump_rule.gif'
        };
      default:
        return {};
    }
  }

  isConflict(rules) {
    return false;
  }

  render() {
    const {
      type, selectedIds, rules, triggers, targets,
      isValid, addNewRule, onRuleDelete,
      onRuleChange, onSelectedIdChange
    } = this.props.store;
    const selectedId = selectedIds[type];
    const { isShowConflict } = this.state;
    const theRules = rules.filter(r => type === r.type);
    const isShowIntr = !theRules.length;

    return (
      <Row className='wea-edc-rule-pane'>
        <Col span={selectedId ? 18 : 24}>
          <RuleAlert visible={isShowConflict} />
          <RuleIntr visible={isShowIntr} {...this.getIntrLabels(type)} />
          {theRules.map(r => (
            <RuleItem
              rule={r}
              className={classNames({
                "active": selectedId === r.id,
                "wea-edc-error": !isValid(r)
              })}
              onClick={() => onSelectedIdChange(r.id)}
              onDelete={() => onRuleDelete(r.id)}
            />
          ))}
          {!!triggers.length &&
            < Button
              icon='edc-rule'
              className='btn-new-rule'
              onClick={addNewRule}
            >
              {getLabel(505275,'添加新规则')}
            </Button>
          }
        </Col>
        <Col span={6}>
          <RuleSettings
            targets={targets}
            triggers={triggers}
            rule={rules.find(r => selectedId === r.id)}
            onChange={onRuleChange}
          />
        </Col>
      </Row>
    );
  }
};